<template>
  <div class="found-view">
    <van-search
      @click="goToHomeSearchView"
      shape="round"
      disabled
      :left-icon="icon"
      placeholder="幻想学院"
    />

    <van-tabs v-model="active" line-height="0" :swipeable="false" animated>
      <van-tab v-for="(item,index) in titleList" :title="item.title" :key="index">
        <component :is="comName"></component>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import VideoView from "@/components/HomeComponents/FoundComponents/VideoView.vue";
import RecommendedView from "@/components/HomeComponents/FoundComponents/RecommendedView.vue";
import LiveView from "@/components/HomeComponents/FoundComponents/LiveView.vue";
import LifeView from "@/components/HomeComponents/FoundComponents/LifeView.vue";
import FilmView from "@/components/HomeComponents/FoundComponents/FilmView.vue";
import RecreationView from "@/components/HomeComponents/FoundComponents/RecreationView.vue";
import QuadraticElement from "@/components/HomeComponents/FoundComponents/QuadraticElement.vue";
import GameView from "@/components/HomeComponents/FoundComponents/GameView.vue";
import LiteratureView from "@/components/HomeComponents/FoundComponents/LiteratureView.vue";
import PhotographyView from "@/components/HomeComponents/FoundComponents/PhotographyView.vue";
import PaintingView from "@/components/HomeComponents/FoundComponents/PaintingView.vue";
import DesignView from "@/components/HomeComponents/FoundComponents/DesignView.vue";
import TravelView from "@/components/HomeComponents/FoundComponents/TravelView.vue";
import NewEraView from "@/components/HomeComponents/FoundComponents/NewEraView.vue";
export default {
  name: "FoundView", //发现页
  components: {
    RecommendedView,
    VideoView,
    LiveView,
    LifeView,
    FilmView,
    RecreationView,
    QuadraticElement,
    GameView,
    LiteratureView,
    PhotographyView,
    PaintingView,
    DesignView,
    TravelView,
    NewEraView
  },
  data() {
    return {
      active: 0,
      icon: require("@/assets/images/home/search.png"),
      titleList: [
        {
          title: "推荐",
          type: "RecommendedView"
        },
        {
          title: "视频",
          type: "VideoView"
        },
        {
          title: "直播",
          type: "LiveView"
        },
        {
          title: "生活",
          type: "LifeView"
        },
        {
          title: "影视",
          type: "FilmView"
        },
        {
          title: "娱乐",
          type: "RecreationView"
        },
        {
          title: "二次元",
          type: "QuadraticElement"
        },
        {
          title: "游戏",
          type: "GameView"
        },
        {
          title: "文学",
          type: "LiteratureView"
        },
        {
          title: "摄影",
          type: "PhotographyView"
        },
        {
          title: "绘画",
          type: "PaintingView"
        },
        {
          title: "设计",
          type: "DesignView"
        },
        {
          title: "旅行",
          type: "TravelView"
        },
        {
          title: "新时代",
          type: "NewEraView"
        }
      ]
    };
  },
  methods: {
    goToHomeSearchView() {
      this.$router.push({
        name: "search"
      });
    }
  },
  computed: {
    comName() {
      return this.titleList[this.active].type;
    }
  }
};
</script>

<style lang="scss" scoped>
.found-view {
  width: 100vw;
  background-color: rgb(255, 255, 255);
}
</style>